<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<head>
    <title>短信套餐</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <%@include file="../include/commonFile.jsp" %>
    <style type="text/css">
        .ul-main {
            /*width: 1050px;*/
            margin: 0px auto
        }

        .ul-main .li-item {
            position: relative;
            width: 290px;
            height: 130px;
            float: left;
            border: 2px solid #cccccc7d;
            border-radius: 10px;
            padding: 10px;
            padding-bottom: 0px!important;
            text-align: center;
            margin-bottom: 30px;
            margin-right: 30px;
        }

        .ul-main .li-item:after {
            content: '';
            position: absolute;
            top: 131px;
            left: 35%;
            width: 0;
            height: 0;
            border-bottom: 15px solid transparent;
            border-right: 15px solid #fff;
            border-top: 15px solid transparent;
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
        }

        .ul-main .li-item:before {
            content: '';
            position: absolute;
            top: 134px;
            left: 35%;
            width: 0;
            height: 0;
            border-right: 15px solid #E4E4E2;
            border-bottom: 15px solid transparent;
            border-top: 15px solid transparent;
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
        }

        .group-detail {
            font-size: 15px;
            line-height: 16px;
            padding: 20px 0;
            letter-spacing: 1px;
        }
        .primary-color {
            color: #ff7d00;
        }

        .btn-buy {
            width: 113px;
            border-radius: 8px;
            margin: 0px auto;
            display: block;
            font-size: 14px;
        }

        .current-price {
            line-height: 30px;
            font-size: 30px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <div class="introduce mt20">
                <c:if test="${fn:length(packages) == 0}">
                    <div class="f16">敬请期待新的短信套餐购买...</div>
                </c:if>
                <c:if test="${fn:length(packages) > 0}">
                    <ul class="ul-main">
                        <c:forEach var="module" items="${packages}">
                            <c:set var="flag" value="false"></c:set>
                            <c:forEach var="pMember" items="${packageMembers}">
                                <c:if test="${pMember.levelId == module.id && module.price == 0.0}">
                                    <c:set var="flag" value="true"></c:set>
                                </c:if>
                            </c:forEach>
                            <li class="li-item" data-id="${module.id}">
                                <c:if test="${module.price == 0.0}">
                                    <p><span class="current-price second-color">免费</span></p>
                                </c:if>
                                <c:if test="${module.price > 0.0}">
                                    <p>
                                        <span class="current-price second-color">
                                            <fmt:formatNumber value="${module.price}" pattern="0.00"></fmt:formatNumber>
                                        </span>
                                        <c:if test="${module.isUserDefined == 1}">
                                            <span class="mr10">元/条</span>
                                        </c:if>
                                        <c:if test="${module.isUserDefined == 2}">
                                            <span class="mr10">元</span>
                                        </c:if>
                                        <%--<span class="origin-price red" style="text-decoration: line-through">
                                            <i style="font-style: normal; color: #4c5161!important">原价￥1153</i>
                                        </span>--%>
                                    </p>
                                </c:if>
                                <c:if test="${module.isUserDefined == 1}">
                                    <p class="group-detail">低至
                                        <span class="primary-color"><fmt:formatNumber value="${module.price}" pattern="#.###"></fmt:formatNumber>元/条</span>
                                    </p>
                                </c:if>
                                <c:if test="${module.isUserDefined == 2}">
                                    <p class="group-detail">享
                                        <span class="primary-color">${module.quantity}条</span> 短信
                                        <c:if test="${module.price > 0.0}">
                                            | 低至
                                            <span class="primary-color"><fmt:formatNumber value="${module.price / module.quantity}" pattern="#.###"></fmt:formatNumber>元/条</span>
                                        </c:if>
                                    </p>
                                </c:if>
                                <c:if test="${module.price > 0.0}">
                                    <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-sm btn-buy buy-btn">立即购买</a>
                                </c:if>
                                <c:if test="${module.price == 0.0}">
                                    <c:if test="${flag == true}">
                                        <a href="javascript:void(0);" class="layui-btn layui-btn-disabled layui-btn-sm btn-buy">已领取</a>
                                    </c:if>
                                    <c:if test="${flag == false}">
                                        <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-sm btn-buy free-buy-btn">立即领取</a>
                                    </c:if>
                                </c:if>
                            </li>
                        </c:forEach>
                        <li style="clear: both!important;"></li>
                            <%--<c:forEach var="module" items="${packages}">
                                <li class="li-item" data-id="${module.id}">
                                    <div class="item-center" style="flex: 3;margin-left: 15px;margin-right: 15px;">
                                        <p class="title"><span>${module.name}</span></p>
                                        <p class="remarks"><span>${module.remarks}</span></p>
                                    </div>
                                    <div style="flex: 0.4; text-align: center!important;">
                                        <div style="font-size: 16px; color: red; padding-bottom: 10px;">${module.price}<span>元/${module.unit}</span></div>
                                        <c:if test="${module.price > 0.0}">
                                            <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-sm buy-btn">
                                                <i class="iconfont icon-add btn-icon"></i> 购买</a>
                                        </c:if>
                                        <c:if test="${module.price == 0.0}">
                                            <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-sm free-buy-btn">
                                                <i class="iconfont icon-add btn-icon"></i> 购买</a>
                                        </c:if>
                                    </div>
                                </li>
                            </c:forEach>--%>
                    </ul>
                </c:if>
            </div>
        </div>
    </section>
</div>
<!--底部-->
<%@include file="../include/footer.jsp" %>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '短信套餐购买',
            curr: true
        }]
    });
    $(function () {
        var layer;
        layui.use(['layer'], function () {
            layer = layui.layer;
        });
        $(".introduce .ul-main").delegate(".li-item", 'click', function (e) {
            var $target = $(e.target);
            var levelId = $target.closest("li").data("id");
            if ($target.hasClass("btn-icon")) {
                $target = $target.parent();
            }
            if ($target.hasClass("buy-btn")) {
                layer.open({
                    type: 2,
                    area: ["670px", "470px"],
                    title: "订单支付",
                    maxmin: false,
                    content: "${ctx}/charge/package/" + levelId + "/buyOrder.do",
                    btn: ['关闭'],
                    yes: function (index) {
                        top.layer.close(index);
                    }
                });
                e.stopPropagation();
            } else if ($target.hasClass("free-buy-btn")) {
                // 免费
                $.post("${ctx}/charge/package/buyFreeModule.do", {"moduleId": levelId}, function (data) {
                    if (data.success) {
                        util.layerMsgSuccess("领取成功", function () {
                            location.reload();
                        })
                    } else {
                        util.layerMsgError("领取失败");
                    }
                })
            }
        });
    })
</script>
</body>
</html>
